外部样式表

概述

在前面的课程中，我们学习了如何使用内联样式和内部样式表来为HTML文档添加样式。然而，随着网页变得越来越复杂，使用内联样式和内部样式表可能会导致代码冗余和维护困难。为了解决这些问题，我们可以使用外部样式表。外部样式表允许我们将CSS代码从HTML文件中分离出来，从而提高代码的可维护性和复用性。

理论解释

什么是外部样式表？

外部样式表是一个独立的CSS文件，其中包含所有用于样式化HTML文档的CSS规则。通过将CSS代码放在一个单独的文件中，我们可以将样式与内容分离，从而使代码更加清晰和易于维护。

如何链接外部样式表？

要在HTML文档中使用外部样式表，我们需要使用<link>标签。<link>标签通常放在HTML文档的<head>部分，用于指定外部样式表的位置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用外部样式表的示例。</p>
</body>
</html>

在上面的示例中，<link>标签的rel属性指定了链接的资源类型为样式表，href属性指定了外部样式表文件的路径。

外部样式表的优势

1. 代码复用：可以在多个HTML文件中使用同一个外部样式表，从而减少代码冗余。
2. 易于维护：将样式与内容分离，使得修改样式更加方便。
3. 性能优化：浏览器可以缓存外部样式表，从而提高页面加载速度。

代码示例

创建外部样式表

首先，我们需要创建一个CSS文件，例如styles.css，并在其中编写CSS规则。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: #007bff;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

链接外部样式表

接下来，在HTML文件中使用<link>标签链接外部样式表。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用外部样式表的示例。</p>
</body>
</html>

结果

当浏览器加载这个HTML文件时，它会自动加载并应用styles.css文件中的样式规则。页面将显示一个蓝色的标题和一段带有特定字体大小和行高的段落。

实践练习

练习1：创建并链接外部样式表

1. 创建一个新的HTML文件，例如index.html。
2. 在HTML文件的<head>部分使用<link>标签链接一个外部样式表。
3. 创建一个名为styles.css的CSS文件，并在其中编写一些基本的样式规则。
4. 在HTML文件中添加一些内容（如标题和段落），并观察外部样式表如何应用到这些内容上。

练习2：在多个页面中使用同一个外部样式表

1. 创建两个不同的HTML文件，例如page1.html和page2.html。
2. 在这两个HTML文件中都使用同一个外部样式表。
3. 观察样式如何在不同的页面中保持一致。

总结

外部样式表是现代Web开发中不可或缺的一部分。通过将CSS代码从HTML文件中分离出来，我们可以提高代码的可维护性和复用性。希望这篇教程能帮助你更好地理解和使用外部样式表。在接下来的课程中，我们将深入学习CSS的基础知识，包括选择器、属性和值等内容。